﻿<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport"/>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>登录页面</title>
    <link rel="stylesheet" th:href="@{static/supercat/css/login.css}"/>
    <script th:src="@{static/adminlte/bower_components/jquery/jquery-2.2.3.min.js}" type="text/javascript"></script>

    <script>
        $(function () {
            //得到焦点
            $("#password").focus(function () {
                $("#left_hand").animate({
                    left: "150",
                    top: " -38"
                }, {
                    step: function () {
                        if (parseInt($("#left_hand").css("left")) > 140) {
                            $("#left_hand").attr("class", "left_hand");
                        }
                    }
                }, 2000);
                $("#right_hand").animate({
                    right: "-64",
                    top: "-38px"
                }, {
                    step: function () {
                        if (parseInt($("#right_hand").css("right")) > -70) {
                            $("#right_hand").attr("class", "right_hand");
                        }
                    }
                }, 2000);
            });
            //失去焦点
            $("#password").blur(function () {
                $("#left_hand").attr("class", "initial_left_hand");
                $("#left_hand").attr("style", "left:100px;top:-12px;");
                $("#right_hand").attr("class", "initial_right_hand");
                $("#right_hand").attr("style", "right:-112px;top:-12px");
            });
        });
    </script>

</head>
<body>
<div class="top_div"></div>
<div style="background: rgb(255, 255, 255); margin: -100px auto auto; border: 1px solid rgb(231, 231, 231); border-image: none; width: 400px; height: 200px; text-align: center;">
    <form action="/login" method="post">
    <div style="width: 165px; height: 96px; position: absolute;">
        <div class="tou"></div>
        <div class="initial_left_hand" id="left_hand"></div>
        <div class="initial_right_hand" id="right_hand"></div>
    </div>
    <P style="padding: 30px 0px 10px; position: relative;"><span
            class="u_logo"></span> <input class="ipt" type="text" name="username" placeholder="请输入手机号码" value="">
    </P>
    <P style="position: relative;"><span class="p_logo"></span>
        <input class="ipt" id="password" type="password" name="password" placeholder="请输入密码" value="">
    </P>
        <p style="height: 20px"><span th:if="${message}" th:text="${message}" style="color: red"></span></p>
    <div style="height: 50px; line-height: 50px; margin-top: 10px; border-top-color: rgb(231, 231, 231); border-top-width: 1px; border-top-style: solid;">
        <P style="margin: 0px 35px 20px 45px;"><input style="float: left;margin-top: 19px" id="checkbox-signup" name="rememberMe" type="checkbox"
                                                      th:checked="${rememberMe == null? true:rememberMe}"/><span style="float: left;"><span style="color: rgb(204, 204, 204);"
                                                                             >记住密码</span></span>
            <span style="float: right;"><A style="color: rgb(204, 204, 204); margin-right: 10px;"
                                           href="#">注册</A>
              <button type="submit" style="background: rgb(0, 142, 173); padding: 7px 10px; border-radius: 4px; border: 1px solid rgb(26, 117, 152); border-image: none; color: rgb(255, 255, 255); font-weight: bold;"
                 >登录</button>
           </span></P></div>
    </form>
</div>
</body>
</html>
